<div class="section">
  <div class="heading">
    <div class="title"><strong>基本用法</strong></div>
  </div>
  
  <div class="box">
    <p class="space-sm">使用图片作为头像：</p>
    <div class="box outline">
      <div class="avatar"><img src="doc/img/avatar.png" alt=""></div>
    </div>
    <pre>
<code>&lt;div class=&quot;avatar&quot;&gt;
  &lt;img src=&quot;doc/img/avatar.png&quot; alt=&quot;&quot;&gt;
&lt;/div&gt;</code></pre>

    <hr class="space">
    <p class="space-sm">使用图标作为头像，应用外观着色选项来更改头像色彩：</p>
    <div class="box outline">
      <div class="avatar green"><i class="icon icon-user"></i></div>
    </div>
    <pre>
<code>&lt;div class=&quot;avatar green&quot;&gt;&lt;i class=&quot;icon icon-user&quot;&gt;&lt;/i&gt;&lt;/div&gt;</code></pre>

    <hr class="space">
    <p class="space-sm">使用文字作为头像，应用外观着色选项来更改头像色彩：</p>
    <div class="box outline">
      <div class="avatar red">赵</div>
    </div>
    <pre>
<code>&lt;div class=&quot;avatar red&quot;&gt;赵&lt;/div&gt;</code></pre>
  </div>
</div>

<div class="section">
  <div class="heading">
    <div class="title"><strong>更改头像大小</strong></div>
  </div>
  <div class="box">
    <p class="space-sm">小头像：<code>.avatar.avatar-sm</code></p>
    <div class="box outline">
      <div class="avatar avatar-sm"><img src="doc/img/avatar.png" alt=""></div>
      <div class="avatar avatar-sm" data-skin><i class="icon icon-user"></i></div>
      <div class="avatar avatar-sm" data-skin>赵</div>
    </div>
    <pre>
<code>&lt;div class=&quot;avatar avatar-sm&quot;&gt;...&lt;/div&gt;</code></pre>
    <hr class="space">
    <p class="space-sm">一般大小：<code>.avatar</code></p>
    <div class="box outline">
      <div class="avatar"><img src="doc/img/avatar.png" alt=""></div>
      <div class="avatar" data-skin><i class="icon icon-user"></i></div>
      <div class="avatar" data-skin>赵</div>
    </div>
    <pre>
<code>&lt;div class=&quot;avatar&quot;&gt;...&lt;/div&gt;</code></pre>
    <hr class="space">
    <p class="space-sm">大头像：<code>.avatar.avatar-lg</code></p>
    <div class="box outline">
      <div class="avatar avatar-lg"><img src="doc/img/avatar.png" alt=""></div>
      <div class="avatar avatar-lg" data-skin><i class="icon icon-user"></i></div>
      <div class="avatar avatar-lg" data-skin>赵</div>
    </div>
    <pre>
<code>&lt;div class=&quot;avatar avatar-lg&quot;&gt;...&lt;/div&gt;</code></pre>
    <hr class="space">
    <p class="space-sm">超大头像：<code>.avatar.avatar-xl</code></p>
    <div class="box outline">
      <div class="avatar avatar-xl"><img src="doc/img/avatar.png" alt=""></div>
      <div class="avatar avatar-xl" data-skin><i class="icon icon-user"></i></div>
      <div class="avatar avatar-xl" data-skin>赵</div>
    </div>
    <pre>
<code>&lt;div class=&quot;avatar avatar-xl&quot;&gt;...&lt;/div&gt;</code></pre>
    <hr class="space">
  </div>
</div>

<div class="section">
  <div class="heading">
    <div class="title"><strong>外观选项</strong></div>
  </div>
  <div class="box">
    <p class="space-sm">外观选项用法参考 <strong class="text-link">基础 > 外观</strong> 章节。以下列举常见用法。</p>
    <p class="space-sm">着色</p>
    <div class="box outline space">
      <div class="avatar primary"><i class="icon icon-home"></i></div>
      <div class="avatar success"><i class="icon icon-star"></i></div>
      <div class="avatar info"><i class="icon icon-user"></i></div>
      <div class="avatar red"><i class="icon icon-heart"></i></div>
      <div class="avatar yellow">赵</div>
      <div class="avatar important-pale text-tint">赞</div>
      <div class="avatar special-pale text-tint"><i class="icon icon-flag"></i></div>
    </div>
    <p class="space-sm">圆角 <code>.rounded</code></p>
    <div class="box outline space">
      <div class="avatar rounded"><img src="doc/img/avatar.png" alt=""></div>
      <div class="avatar rounded primary"><i class="icon icon-home"></i></div>
      <div class="avatar rounded success"><i class="icon icon-star"></i></div>
      <div class="avatar rounded info"><i class="icon icon-user"></i></div>
      <div class="avatar rounded red"><i class="icon icon-heart"></i></div>
      <div class="avatar rounded yellow">赵</div>
      <div class="avatar rounded important-pale text-tint">赞</div>
      <div class="avatar rounded special-pale text-tint"><i class="icon icon-flag"></i></div>
    </div>

    <p class="space-sm">圆形 <code>.circle</code></p>
    <div class="box outline space">
      <div class="avatar circle"><img src="doc/img/avatar.png" alt=""></div>
      <div class="avatar circle primary"><i class="icon icon-home"></i></div>
      <div class="avatar circle success"><i class="icon icon-star"></i></div>
      <div class="avatar circle info"><i class="icon icon-user"></i></div>
      <div class="avatar circle red"><i class="icon icon-heart"></i></div>
      <div class="avatar circle yellow">赵</div>
      <div class="avatar circle important-pale text-tint">赞</div>
      <div class="avatar circle special-pale text-tint"><i class="icon icon-flag"></i></div>
    </div>
  </div>
</div>
